<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
            html {height:100%}
            body {height:100%;margin:0;padding:0}
            #googleMap {height:100%}
        </style>
        <!-- Este es el script que llama a la api de google-->
        <script
            src="http://maps.googleapis.com/maps/api/js?key=AIzaSyD5lypGnGNrZXVfiLd-IQKNVyKZTjqsJdo&sensor=false">
        </script>
        <!-- En el interior va el key que es la key de acceso a la api y 
             un sensor que es boolean que lo que ase es determinar si el
             dispositivo detectara el lugar donde el usuario esta o no.
        -->
        <!----------------------------------------------------------------------------------->

        <!--Este codigo pone un marcador donde inicia el mapa-->

      
        <script>
            var myCenter=new google.maps.LatLng(10.508742,-0.120850); // Ajustar la posicion inicial

            function initialize()
            {
                var mapProp = {
                    center:myCenter,
                    zoom:5,
                    mapTypeId:google.maps.MapTypeId.ROADMAP
                };

                var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

                var marker=new google.maps.Marker({//se pone el marcador
                    position:myCenter // se usa la posicion inicial para poner el marcador, pero puede ponerse cualquiera.
                });

                marker.setMap(map);
            }

            google.maps.event.addDomListener(window, 'load', initialize);
        </script>
    
        <!------------------------------------------------------------------------------>

        <!-- Este codigo se usa para iniciar un mapa-->

        <!--
         <script>
                     function initialize()
                     {
                         //esta parte lo que hace es ajustar las entradas iniciales del mapa donde va a partir(center) el zoom y el tipo de mapa 
                         var mapProp = {
                             center:new google.maps.LatLng(51.508742,-0.120850),//lugar donde inicia el mapa
                             zoom:4,// zoom en el mapa
                             mapTypeId:google.maps.MapTypeId.HYBRID // tipo de mapa :HYBRID, ROADMAP, SATELLITE, TERRAIN
                         };
                         
                         var map=new google.maps.Map(document.getElementById("googleMap"),mapProp); //lo que va dentro de get ElementBYId es el id que tomara el mapa para llamarlo en el codigo
                          
                     }
         
                     google.maps.event.addDomListener(window, 'load', initialize);
                 </script>
        -->
    </head>


    <body>
        <div id="googleMap" style="width:800px;height:800px;"></div>

    </body>
</html>

